/*****************************************************
*
*     Read me
*
******************************************************/
// Install yarn with 'yarn'
// Compile this less file with 'yarn compile'



/*****************************************************
*
*     Imports
*
******************************************************/


//
// UIKit Core
//
@import "../src/less/uikit.less";


//
// Stageone Customizings
//
@import "../../lib/css/so-uikit-config.less";
@import "../../lib/css/so-less-lib.less";
@import "../../lib/css/so-css-plugins.less";
@import "../../lib/css/so-template-base-styles.less";



/*****************************************************
*
*     Stageone Template
*
******************************************************/

//
// Phone portrait
//

.gradient-background {
  .gradient(@color-a,@color-c);
}

.font-secondary {
  font-family:@font-secondary;
}

h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-heading-small, .uk-heading-medium {
  color:@color-a;
}

.circle-button {
  width:43px;
  height:43px;
  &.large-circle {
    width:40px;
    height:40px;
  }

  &.light-button {
    color:@color-base-e !important;
  }

  &.selected {
    color:@color-base-a !important;
    background: @color-base-e !important;
  }
}


tr.plot-color {
  border-top-color: @color-base-d !important;
  border-top-width: 0px !important;

  >td:first-child {
    padding-left: 7px;
  }

  >td:last-child {
    padding-right: 7px;
  }
  
  &.tiny {
    background-color: rgba(50, 165, 160, 0.66);
    //color: @color-white !important;
  }
  &.xs {
    //background-color: #B7D365;
  }
  &.small {
    background-color: rgba(183, 211, 102, 0.66)
  }
  &.medium {
    background-color: rgba(156, 187, 234, 0.66);
  }
  &.large {
    background-color: rgba(35, 207, 216, 0.66);
    //color: @color-white !important;
  }
  &.xl {
    background-color: rgba(255, 249, 145, 0.66);
  }
  &.xxl {
    background-color: rgba(211, 158, 166, 0.66);
    //color: @color-white !important;
  }
  &.quick {
    background-color: rgba(211, 158, 166, 0.66);
  }
  &.season {
    background-color: rgba(196, 173, 121, 0.66);
  }
}

.uk-overflow-auto {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  table {
    td {
      white-space: nowrap;
    }
  }
}

.uk-button {
  .transition();
}

.card-special {
  margin-top:75px;
  .uk-card-media-left {
    top:-75px;
    left:50%;
    transform: translateX(-50%);
    width:150px;
    height:150px;
  }
  .uk-card-body {
    margin-top:75px;
  }
}


.uk-button-default,
.uk-button-primary,
.uk-button-secondary,
.uk-button-third,
.uk-button-text {
  font-weight:@font-semibold-weight;
  text-transform: uppercase;
}

.uk-button-default,
.uk-button-primary,
.uk-button-secondary,
.uk-button-third {
  border:@global-medium-border-width solid @color-a;

  &.button-special {
    .circle-button {
      color:@color-a;
      background: @color-a;
      .uk-icon {
        color:@color-white;
      }
    }
  }

  .uk-icon {
    color:@color-white;
  }

}

.uk-light {
  .uk-button-default,
  .uk-button-primary,
  .uk-button-secondary,
  .uk-button-third {
    border:@global-medium-border-width solid @color-white;

    &.button-special {
      .circle-button {
        color:@color-white;
        background: @color-white;
        .uk-icon {
          color:@color-b;
        }
      }
    }

  }
}

.uk-button-secondary {
  border-color:@color-c;
}

.uk-button-third {
  border-color:@color-b;
  background-color:@color-b;
  color:@global-inverse-color;
  &:hover {
    border-color:@color-a;
    background-color:@color-a;
  }
}

.button-special {
  .circle-button {
    top:-1px;
    left:-1px;
  }
}

.uk-light {
  .uk-button-default,
  .uk-button-primary,
  .uk-button-secondary {
    border-color:@global-inverse-color;
  }
}

.uk-subnav-pill {
  li {

    a {
      .transition();
      border:@global-medium-border-width solid @color-a;
    }
  }
}

.uk-tooltip-left-center {
  &:before {
    .bubbleRight(@color-a, 7px, 7px, 50%);
  }
}

.uk-tooltip-bottom-center {
  &:before {
    .bubbleTop(@color-a, 7px, 7px, 50%);
  }
}

.uk-table th {
  font-family: @font-secondary;
}

.rotate-easy {
  .rotate(7deg);
}

.uk-modal {
  z-index: @global-z-index + 60;
}

.full-size-modal {
  padding:0;
  .uk-modal-dialog {
    width:100%;
  }
}


#mobile-navigation, #main-navigation {
  li.level-1 {
    a.level-1 {
      font-family: @navbar-nav-item-font-family;
      font-size: @navbar-nav-item-font-size;
      font-weight: @font-bold-weight;
      line-height:@small-line-height;
    }
    &:hover {
      a.level-1 {
       color:@navbar-nav-item-hover-color;
      }
    }
    &.starter_active {
      a.level-1 {
        color:@navbar-nav-item-active-color;
      }
    }
  }

  li.level-2 {
    a.level-2 {
      font-size:1.1em;
      .active-nav-flag {
        display: none;
      }
    }
    &:hover {
      a.level-2 {
        color:@navbar-dropdown-nav-item-hover-color;
      }
    }
    &.active {
      a.level-2 {
        color: @navbar-dropdown-nav-item-active-color;
        font-weight: @font-bold-weight;
        .active-nav-flag {
          display: inline-block;
        }
      }

    }
  }

}

.jc-background {
  height: 200px;
}

//
// Forms
//

.error-container {
  display: none !important;
}

.uk-radio, .uk-checkbox {
  border:0 !important;
}

.uk-light .uk-input.ipt-valid, .uk-input.ipt-valid {
 // empty
}

.uk-light .uk-input.ipt-error, .uk-input.ipt-error, .uk-light .uk-select.ipt-error, .uk-select.ipt-error, .uk-light .uk-textarea.ipt-error, .uk-button-text.ipt-error {
  background-color:fade(@global-warning-background, 50%);
}

label.ipt-error {
  color:@global-warning-background;
}

.ipt-valid-icon, .ipt-error-icon {
  .transition();
  opacity: 0;
}

.ipt-valid .ipt-valid-icon {
  opacity: 1;
}

.ipt-error .ipt-error-icon {
  opacity: 1;
}


//
// Mobile landscape
//
@media (orientation: landscape) {
  .is-touch-device {
    .uk-sticky-fixed {
      display: none;
    }
  }

}


//
// Tablet portrait
//

@media (min-width: @breakpoint-small) {

  .jc-background {
    height: 300px;
  }

  .card-special {
    margin-top:0px;
    margin-left:50px;
    .uk-card-media-left {
      top:100px;
      left:-75px;
      transform: translateX(0);
      width:150px;
      height:150px;
    }
    .uk-card-body {
      margin-top:0px;
      margin-left:75px;
    }
  }

}



//
// Tablet landscape
//
@media (min-width: @breakpoint-medium) {

  .is-touch-device {
    .uk-sticky-fixed {
      display: block;
    }
  }

  .circle-button {
    &.large-circle {
      width:48px;
      height:48px;
    }
  }

  .jc-background {
    height: 350px;
  }

}

//
// Desktop
//

@media (min-width: @breakpoint-large) {

  .jc-background {
    height: 400px;
  }

  .card-special {
    margin-top:0px;
    margin-left:50px;
    .uk-card-media-left {
      top:50%;
      left:-75px;
      transform: translateY(-50%);
      width:200px;
      height:200px;
    }
    .uk-card-body {
      margin-top:0px;
      margin-left:105px;
    }
  }

}

//
// Large screens
//

@media (min-width: @breakpoint-xlarge) {

  .card-special {
    margin-top:0px;
    margin-left:0px;
    .uk-card-media-left {
      top:50%;
      left:-75px;
      transform: translateY(-50%);
      width:200px;
      height:200px;
    }
    .uk-card-body {
      margin-top:0px;
      margin-left:105px;
    }
  }

}


//
// Crossbrowser fallback
//

.is-explorer {
  // Empty
}

.is-explorer-11 {
  // Empty
}